/**
 * 摇杆ui
 * */
import {window2stageChange} from './size-change'
import {groupAlpha} from './utils-display-object'

class JoystickUi extends eui.Component {
  public stickRadiusByWindow: number // 摇杆可活动半径，相对于对于window的比例
  private moveArea: egret.Shape
  private stick: egret.Shape

  constructor() {
    super()
    this.stickRadiusByWindow = window.innerWidth * 0.15
  }

  show() {
    if (this.moveArea && this.stick) {
      this.addChild(this.moveArea)
      this.addChild(this.stick)
      return
    }

    const stickR = window2stageChange(this.stickRadiusByWindow)

    // 移动区域
    const shape = new egret.Shape()
    shape.graphics.beginFill(0x000000)
    shape.graphics.lineStyle(window2stageChange(5), 0xffffff)
    shape.graphics.drawCircle(0, 0, stickR)
    shape.graphics.endFill()
    this.addChild(shape)
    this.moveArea = shape

    // 摇杆本体
    this.stick = new egret.Shape()
    this.stick.graphics.beginFill(0xffffff)
    this.stick.graphics.drawCircle(0, 0, stickR * 0.3)
    this.stick.graphics.endFill()
    this.addChild(this.stick)

    this.horizontalCenter = 0

    const showStageH = window2stageChange(window.innerHeight)
    this.verticalCenter = showStageH * 0.45 - stickR
    // this.verticalCenter = 0

    groupAlpha(this, 0.3)
  }

  update(x: number, y: number) {
    this.stick.x = window2stageChange(x)
    this.stick.y = window2stageChange(y)
  }

  hide() {
    this.removeChild(this.stick)
    this.removeChild(this.moveArea)
  }
}

export default JoystickUi
